<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            width: 400px;
            height: 400px;
            border: 1px solid #000;
            margin: auto;
        }
        ul li{
            border-bottom: 1px dashed #666666;
            padding: 4px;
            list-style: none;
            opacity: 0;
            filter: alpha(opacity:0);
        }
    </style>
</head>
<body>
<textarea name="" id="txt1" cols="30" rows="4" cols="40"></textarea>
<button id="btn1">发布</button>
<br/>
<br/>
<br/>
<ul id="ul1">
    <li>sasassS</li>
</ul>
<script src="js/util.js" type="text/javascript"></script>
<script type="text/javascript">
    var text1 = document.getElementById('txt1');
    var oBtn = document.getElementById('btn1');
    var oUl = document.getElementById('ul1');

    oBtn.onclick = function () {
      var content = text1.value;
      text1.value = '';

      var oLi = document.createElement('li');
      oLi.innerHTML = content;

      if(oUl.children.length>0){
          oUl.insertBefore(oLi,oUl.children[0]);
      }
      else {
          oUl.appendChild(oLi);
      }
      var iHeight = oLi.offsetHeight;
      startMove(oLi,{height:iHeight},function () {
          startMove(oLi,{opacity:100});
      })
    };




</script>




















</body>
</html>